<template>
  <div>
    <h2>户型信息</h2>
    <el-button style="margin-bottom:15px" type="primary" size="mini" @click="showHouse">添加户型</el-button>
    <el-table  border :data="list"  style="width: 100%">
        <el-table-column label="户型名称">
            <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
            </template>
        </el-table-column>
        <el-table-column label="户型">
            <template slot-scope="scope">
              <span>{{scope.row.bedRoomNum}}室{{scope.row.livingRoomNum}}厅{{scope.row.kitchenNum}}厨{{scope.row.toiletNum}}卫</span>
            </template>
        </el-table-column>
        <el-table-column label="户型面积（m2）" width="120" align="center">
            <template slot-scope="scope">
            <span>{{ scope.row.buildArea }}</span>
            </template>
        </el-table-column>
        <el-table-column label="预估总价（人民币 万元/套）" width="270" align="center">
            <template slot-scope="scope">
            <span>{{ scope.row.prePrice }}</span>
            </template>
        </el-table-column>
        <el-table-column label="图片" width="100" align="center">
            <template slot-scope="scope">
              <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.imgUrl"
                :preview-src-list="[scope.row.imgUrl]"
                />
            </template>
        </el-table-column>
        <el-table-column label="是否主力户型" width="100" align="center">
            <template slot-scope="scope">
            <span>{{ scope.row.main? "是" : "否" }}</span>
            </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
            <template slot-scope="scope">
            <el-button
                size="mini"
                type="text"
                @click="edithouse(scope.row)"
                v-hasPermi="['reviewActivities:activities:remove']">
                编辑
            </el-button>
            <el-button
                size="mini"
                type="text"
                @click="deleteInformation(scope.row.id)"
                >
                删除
            </el-button>
            </template>
        </el-table-column>
    </el-table>


    <el-dialog
    title="添加户型"
    :visible.sync="showDialog"
    width="50%"
    center>
     <div class="">
       <el-form ref="form" :model="dialogForm" label-width="120px" :rules="rules">
         <el-form-item label="户型名称" prop="name">
             <el-input placeholder="请填写户型名称" v-model.trim="dialogForm.name"></el-input>
         </el-form-item>
         <el-form-item label="户型" class="fix">
              <div class="">
                <el-select  v-model.trim="dialogForm.bedRoomNum" clearable placeholder="请选择">
                  <el-option
                    v-for="item in bedList"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
                室
                <el-select v-model.trim="dialogForm.livingRoomNum" clearable placeholder="请选择">
                  <el-option
                    v-for="item in roomList"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
                厅
                <div style="margin-top:10px;">
                  <el-select v-model.trim="dialogForm.kitchenNum" clearable placeholder="请选择">
                    <el-option
                      v-for="item in roomList"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                  厨
                  <el-select v-model.trim="dialogForm.toiletNum" clearable placeholder="请选择">
                    <el-option
                      v-for="item in roomList"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                  </el-select>
                  卫
                </div>
              </div>

         </el-form-item>
         <el-form-item label="主卧朝向" prop="orientationType">
           <el-select v-model.trim="dialogForm.orientationType" placeholder="请选择活动区域">
             <el-option
               v-for="item in orientationList"
               :key="item.dictValue"
               :label="item.dictLabel"
               :value="item.dictValue"/>
           </el-select>
         </el-form-item>

         <el-form-item label="建筑面积" prop="buildArea">
             <el-input placeholder="支持两位小数" maxlength="8" v-model.trim="dialogForm.buildArea"> <template slot="append">m2</template></el-input>
         </el-form-item>
         <el-form-item label="层高" prop="floorHeight">
             <el-input  placeholder="支持整型数字" maxlength="3" v-model.number.trim="dialogForm.floorHeight"> <template slot="append">层</template></el-input>
         </el-form-item>
         <el-form-item label="预估总价" prop="prePrice">
             <el-input placeholder="支持整型数字" maxlength="9" v-model.number.trim="dialogForm.prePrice"> <template slot="append">万元</template></el-input>
         </el-form-item>
         <el-form-item label="物业类型" prop="propertyType">
           <el-select v-model.trim="dialogForm.propertyType" placeholder="请选择物业类型">
             <el-option
               v-for="item in propertyList"
               :key="item.dictValue"
               :label="item.dictLabel"
               :value="item.dictValue"/>
           </el-select>
         </el-form-item>

         <el-form-item label="是否主力户型" prop="main">
            <el-radio-group v-model.trim="dialogForm.main">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
         <el-form-item label="户型图" class="fix">

             <el-upload
                :before-upload = "uploadBefore"
                :data="{filetype:'户型图片',app:'shulan',module:'1',sourceKey:'1'}"
                :action="uploadImgUrl"
                :on-success="upLoadSeccess"
                list-type="picture-card"
                :limit="1"
                :file-list="filelist"
                :class="hideUploadEdit?'hide':''"
                :accept="'image/*'"
                >
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{file}">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url" alt=""
                    >
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </span>
                  </div>
              </el-upload>

         </el-form-item>
        </el-form>
     </div>
     <div class="footer">
       <el-button @click="showDialog = false">取 消</el-button>
       <el-button type="primary" @click="addHouse">保 存</el-button>
     </div>
  </el-dialog>


  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { VueDebounce } from "@/utils/index"

import {
  getHouseList,
  saveHourse,
  deleteHouse,
  uploadImgUrl
} from '@/api/overseas'

export default {
  props: {
    communityId: {
      type: String
    },
  },
  components: {

  },
  mounted(){
    this.addHouse = VueDebounce(this.addHouse, 300)
    this.loading = this.$loading({
         lock: true,
         text: 'Loading',
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
    });

    this.getDicts("op_property_type").then(response => {
        this.propertyList = response.data
    });
    this.getDicts("orientationType").then(response => {
        this.orientationList = response.data
    });
    this.getHouseList()
  },
  data() {
    return {
      uploadImgUrl,
      hideUploadEdit:false,
      filelist:[],
      rules:{
        name: [{ required: true, message: '请输入户型名称', trigger: 'blur' }],
        buildArea: [
          {required: true, message: '请输入建筑面积', trigger: 'blur' },
          {pattern: /^\d+(\.\d+)?$/, message: '请输入正数字'}
        ],
        floorHeight: [
          {required: true, message: '请输入层高', trigger: 'blur' },
          {pattern: /^\+?[1-9][0-9]*$/, message: '请输入整型数字'}
        ],
        prePrice: [
          {required: true, message: '请输入预估总价', trigger: 'blur' },
          {pattern: /^\+?[1-9][0-9]*$/, message: '请输入整型数字'}
        ],
        orientationType: [{ required: true, message: '请选择朝向', trigger: 'change' }],
        propertyType: [{ required: true, message: '请选择物业类型', trigger: 'change' }],
        main: [{ required: true, message: '请选择是否主力户型', trigger: 'change' }],
        dynamicContent: [{ required: true, message: '请输入动态内容', trigger: 'blur' }],
      },
      roomList:[0,1,2,3,4,5,6,7,8,9],
      bedList:[1,2,3,4,5,6,7,8,9],
      propertyList:[],
      orientationList:[],
      dialogForm: {
        main: 1,
        bedRoomNum:1,
        livingRoomNum: 0,
        kitchenNum: 0,
        toiletNum: 0
      },
      list:[],
      showDialog: false
    };
  },
  watch: {

  },
  methods: {
    uploadBefore(){
      if(this.dialogForm.imgUrl){
          this.$message({
            type: 'info',
            message: '户型只需传一张图，请删除后重新添加'
          });
          return false
      }
    },
    deleteInformation(id){
      let text = "删除"
      this.$confirm(`确定${text}该户型, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteHouse(id).then(res => {
          this.getHouseList();
        })
        this.$message({
          type: 'success',
          message: `${text}成功!`
        });
        // 维护状态更新
        this.$emit('updateReadyStatus');
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      })
    },
    edithouse(row){
      console.log(row);
      this.showDialog = true;
      this.filelist = [{
        url:row.imgUrl
      }]
      this.hideUploadEdit = row.imgUrl?true:false;
      this.dialogForm = row;
      this.dialogForm.id = row.id
      // this.dialogForm.prePrice = this.dialogForm.prePrice;
    },
    getHouseList(){
      getHouseList(this.communityId).then(res => {
          this.loading.close();
          let list = res.data;
          for(let i = 0;i<list.length;i++){
            list[i].prePrice = list[i].prePrice/10000;
          }
          this.list = list;
      })
    },
    upLoadSeccess(e){
      let id = e[0].id;
      this.dialogForm.imgUrl =   uploadImgUrl + id;
      this.hideUploadEdit = true;
    },
    handleRemove(){
      this.dialogForm.imgUrl = "";
      this.filelist = [];
      this.hideUploadEdit = false;
    },
    showHouse(){
      this.$refs["form"]&&this.$refs["form"].resetFields();
      this.filelist = []
      this.showDialog = true;
      this.hideUploadEdit = false;
      this.dialogForm = {
        name: "",
        bedRoomNum: 1,
        livingRoomNum: 0,
        kitchenNum: 0,
        toiletNum: 0,
        buildArea: "",
        prePrice: "",
        floorHeight: "",
        propertyType: "",
        main: 1
      }
    },
    addHouse(){
      console.log(this.dialogForm);

      if(!this.dialogForm.imgUrl){
        this.$message({
          type: 'info',
          message: '请上传户型图'
        });
        return
      }
      this.$refs["form"].validate((valid) => {
          if (valid) {
            let sendParams = this.dialogForm
            sendParams.prePrice  = sendParams.prePrice*10000
            const params = {
              communityId: this.communityId,
              houseTypeList: [sendParams]
            }
            saveHourse(params).then(res => {
                this.showDialog = false;
                this.getHouseList();
                // 维护状态更新
                this.$emit('updateReadyStatus');
            })
          }else{
            this.$message({
              type: 'info',
              message: '请填写所有带*号的内容'
            });
          }
        })
    }
  }
};
</script>

<style>
  .header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  .text-input {
    width: 200px;
    display: block;
  }
  .set-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 200px;
    margin-top: 20px;
    }
  .main-pic {
    width: 50px;
    height: 30px;
    background-color: #2593fc;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    font-size: 12px;
    color: #fff
  }
  .item-select {
    flex: 1;
    margin-left: 10px;
    font-size: 12px;
    display: flex;
  }
  .content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .fix label::before{
      content: '*';
      color: #ff4949;
  }
  .hide .el-upload--picture-card {
    display: none;
  }
</style>
